<template>
  <view class="select-wrapper" @click="open" :class="{ disabled: disabled }">
    <slot>
      <view class="selector">
        <view class="selector-content">
          <text class="selector-text" :class="{ placeholder: !displayLabel }">{{ displayLabel || placeholder }}</text>
          <uni-icons type="down" size="14" color="#999"></uni-icons>
        </view>
      </view>
    </slot>
  </view>

  <uni-popup ref="popupRef" type="bottom" :mask-click="true">
    <view class="bottom-sheet">
      <view class="bottom-sheet-header">
        <text class="bottom-sheet-title">{{ title }}</text>
        <uni-icons type="close" size="20" @click="close"></uni-icons>
      </view>
      <view class="bottom-sheet-body">
        <view v-for="opt in options" :key="opt[valueField]" class="option-item" @click="handleSelect(opt)">
          <text>{{ opt[labelField] }}</text>
          <uni-icons 
            v-if="isSelected(opt)" 
            type="checkmarkempty" 
            size="16" 
            color="#007aff">
          </uni-icons>
        </view>
      </view>
      <view class="bottom-sheet-footer">
        <view class="btn btn-cancel" @click="close">取消</view>
        <view v-if="multiple" class="btn btn-confirm" @click="confirm">确定</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  modelValue: [String, Number, Array],
  options: { type: Array, default: () => [] },
  valueField: { type: String, default: 'value' },
  labelField: { type: String, default: 'text' },
  placeholder: { type: String, default: '请选择' },
  title: { type: String, default: '请选择' },
  multiple: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false }
})

const emit = defineEmits(['update:modelValue', 'change'])
const popupRef = ref(null)
const tempValue = ref(null)

const displayLabel = computed(() => {
  if (props.multiple) {
    if (!props.modelValue || props.modelValue.length === 0) return ''
    const selectedOptions = props.options.filter(opt => 
      props.modelValue.includes(opt[props.valueField])
    )
    if (selectedOptions.length === 0) return ''
    if (selectedOptions.length === 1) return selectedOptions[0][props.labelField]
    return `已选择 ${selectedOptions.length} 项`
  } else {
    const found = props.options.find(o => o[props.valueField] === props.modelValue)
    return found ? found[props.labelField] : ''
  }
})

function isSelected(opt) {
  if (props.multiple) {
    return props.modelValue && props.modelValue.includes(opt[props.valueField])
  } else {
    return props.modelValue === opt[props.valueField]
  }
}

function open() {
  if (props.disabled) return
  if (props.multiple) {
    tempValue.value = props.modelValue ? [...props.modelValue] : []
  }
  popupRef.value?.open()
}

function close() {
  popupRef.value?.close()
}

function handleSelect(opt) {
  if (props.disabled) return
  if (props.multiple) {
    const value = opt[props.valueField]
    if (tempValue.value.includes(value)) {
      tempValue.value = tempValue.value.filter(v => v !== value)
    } else {
      tempValue.value.push(value)
    }
  } else {
    emit('update:modelValue', opt[props.valueField])
    emit('change', opt)
    close()
  }
}

function confirm() {
  if (props.multiple) {
    emit('update:modelValue', tempValue.value)
    emit('change', tempValue.value)
    close()
  }
}
</script>

<style scoped lang="scss">
.select-wrapper.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.selector {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  background-color: #fff;
}
.selector-content { display: flex; align-items: center; justify-content: space-between; }
.selector-text { font-size: 14px; color: #333; }
.selector-text.placeholder { color: #999; }

.bottom-sheet { background: #fff; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.bottom-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eee; }
.bottom-sheet-title { font-size: 16px; font-weight: 600; color: #333; }
.bottom-sheet-body { max-height: 60vh; overflow-y: auto; padding: 12px 16px; }
.bottom-sheet-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #eee; }
.option-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; border-bottom: 1px solid #f5f5f5; font-size: 14px; color: #333; }
.btn { padding: 6px 14px; font-size: 14px; border-radius: 6px; }
.btn-cancel { background-color: #f8f8f8; color: #666; border: 1px solid #d9d9d9; }
.btn-confirm { background-color: #e6f7ff; color: #007aff; border: 1px solid #91d5ff; }
</style>


